<template>
  <div title="随机视频播放" style="height: 100vh; width: 100vw; margin: 0; padding: 0; overflow: hidden !important; position: fixed; top: 0; left: 0; z-index: 1;">
    <div class="video-header">
      <el-select v-model="currentType" placeholder="选择视频类型" @change="changeVideoType" class="video-type-select">
        <el-option v-for="item in videoTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="video-container" 
         @touchstart="handleTouchStart" 
         @touchend="handleTouchEnd"
         @touchmove="handleTouchMove"
         @mousedown="handleMouseDown"
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseUp">
      <video 
        ref="video" 
        :src="videoSrc" 
        :style="{ opacity: isVideoLoaded ? 1 : 0 }" 
        autoplay 
        playsinline 
        webkit-playsinline 
        @loadedmetadata="handleVideoLoaded"
        @ended="handleVideoEnded">
      </video>
      
      <!-- 加载动画 -->
      <div class="loader" v-if="!isVideoLoaded">
        <div class="spinner"></div>
      </div>
      
      <!-- 2倍速提示 -->
      <div class="speed-indicator" v-if="isFastSpeed">
        2x SPEED
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RandomVideo',
  data() {
    return {
      videoSrc: '',
      isVideoLoaded: false,
      isPlaying: true,
      currentType: 'zzxjj',
      videoTypes: [
        { label: '小姐姐视频', value: 'zzxjj' },
        { label: '聚合小姐姐视频', value: 'juhexjj' },
        { label: '快手随机小姐姐视频', value: 'ksxjjsp' },
        { label: '黑丝视频', value: 'heisis' },
        { label: '白丝视频', value: 'baisis' },
        { label: '漫展视频', value: 'manzhan' },
        { label: '小哥哥视频', value: 'xgg' },
        { label: '玉足美腿', value: 'yuzu' },
        { label: '甜妹系列', value: 'tianmei' },
        { label: 'jk洛丽塔', value: 'jksp' },
        { label: '你的欲梦', value: 'ndym' },
        { label: '双倍快乐', value: 'sbkl' },
        { label: '热舞系列', value: 'rewu' },
        { label: '萝莉系列', value: 'luoli' },
        { label: '漫画芋', value: 'manhuay' },
        { label: '小新翻唱', value: 'xiaoxin' },
        { label: '蛇姐系列', value: 'shejie' },
        { label: '汉服系列', value: 'hanfu' },
        { label: '狱卒系列', value: 'jpmt' },
        { label: '慢摇系列', value: 'manyao' },
        { label: '掉带系列', value: 'diaodai' },
        { label: '清纯系列', value: 'qingchun' },
        { label: 'COS系列', value: 'COS' },
        { label: '纯情女高', value: 'nvgao' },
        { label: '街拍系列', value: 'jiepai' },
        { label: '快手变装', value: 'ksbianzhuang' },
        { label: '抖音变装', value: 'bianzhuang' },
        { label: '动漫视频', value: 'dmsp' },
        { label: '懒洋洋翻唱', value: 'lyy' },
        { label: '完美身材', value: 'wmsc' },
        { label: '丝滑舞蹈', value: 'shwd' },
        { label: '穿搭系列', value: 'chuanda' },
        { label: '鞠婧祎系列', value: 'jjy' },
        { label: '章若楠系列', value: 'zrn' }
      ],
      touchStartY: 0,
      touchStartTime: 0,
      isLongPress: false,
      showTapOverlay: false,
      // 预加载相关
      videoQueue: [], // 视频队列
      preloadCount: 5, // 预加载数量
      isPreloading: false,
      // 长按倍速播放相关
      longPressTimer: null,
      longPressDuration: 500, // 长按500ms触发
      isFastSpeed: false,
      originalSpeed: 1.0
    }
  },
  
  mounted() {
    // 初始化第一个视频
    this.initializeVideo();
  },
  
  beforeDestroy() {
    // 清理定时器
    if (this.longPressTimer) {
      clearTimeout(this.longPressTimer);
    }
  },
  
  methods: {
    // 初始化视频
    initializeVideo() {
      this.videoSrc = `http://api.yujn.cn/api/${this.currentType}.php?temps=${new Date().getTime()}`;
      this.preloadVideos();
    },
    
    // 预加载视频
    preloadVideos() {
      if (this.isPreloading) return;
      
      this.isPreloading = true;
      this.videoQueue = [];
      
      // 创建预加载队列
      for (let i = 0; i < this.preloadCount; i++) {
        const timestamp = new Date().getTime() + i + 1;
        const videoUrl = `http://api.yujn.cn/api/${this.currentType}.php?temps=${timestamp}`;
        
        // 创建预加载器
        const preloadVideo = document.createElement('video');
        preloadVideo.src = videoUrl;
        preloadVideo.preload = 'metadata'; // 只预加载元数据
        
        this.videoQueue.push({
          url: videoUrl,
          element: preloadVideo,
          loaded: false
        });
      }
      
      this.isPreloading = false;
    },
    
    // 切换视频
    nextVideo() {
      this.isVideoLoaded = false;
      
      // 如果队列中有预加载的视频，则使用它
      if (this.videoQueue.length > 0) {
        const nextVideo = this.videoQueue.shift();
        this.videoSrc = nextVideo.url;
        
        // 补充队列
        this.preloadVideos();
      } else {
        // 如果没有预加载的视频，则直接加载新视频
        this.videoSrc = `http://api.yujn.cn/api/${this.currentType}.php?temps=${new Date().getTime()}`;
        this.preloadVideos();
      }
      
      // 确保视频重新加载
      this.$nextTick(() => {
        if (this.$refs.video) {
          this.$refs.video.load();
        }
      });

    },
    
    // 视频加载完成处理
    handleVideoLoaded() {
      this.isVideoLoaded = true;
      if (this.isPlaying && this.$refs.video) {
        this.$refs.video.play();
      }
    },
    
    // 视频播放结束处理
    handleVideoEnded() {
      // 视频结束时自动加载下一个
      this.nextVideo();
    },
    
    // 处理触摸开始事件
    handleTouchStart(event) {
      if (event.touches.length === 1) {
        this.touchStartY = event.touches[0].clientY;
        this.touchStartTime = new Date().getTime();
        
        // 设置长按定时器
        this.longPressTimer = setTimeout(() => {
          this.enableFastSpeed();
        }, this.longPressDuration);
      }
    },
    
    // 处理触摸移动事件
    handleTouchMove(event) {
      // 如果在长按触发前有移动，则取消长按
      if (this.longPressTimer && !this.isFastSpeed) {
        clearTimeout(this.longPressTimer);
        this.longPressTimer = null;
      }
    },
    
    // 处理触摸结束事件
    handleTouchEnd(event) {
      // 清除长按定时器
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer);
        this.longPressTimer = null;
      }
      
      // 如果当前是快进状态，则恢复正常速度
      if (this.isFastSpeed) {
        this.disableFastSpeed();
      } else {
        // 检查是否为点击或短按滑动
        if (this.touchStartY) {
          const touchEndY = event.changedTouches[0].clientY;
          const diff = this.touchStartY - touchEndY;
          const timeDiff = new Date().getTime() - this.touchStartTime;
          
          // 向上滑动超过30px，加载下一个视频
          if (diff > 30 && timeDiff < 300) {
            this.nextVideo();
          }
          this.touchStartY = 0;
        }
      }
    },
    
    // 鼠标按下事件（用于桌面端测试）
    handleMouseDown(event) {
      this.touchStartTime = new Date().getTime();
      
      // 设置长按定时器
      this.longPressTimer = setTimeout(() => {
        this.enableFastSpeed();
      }, this.longPressDuration);
    },
    
    // 鼠标抬起事件
    handleMouseUp() {
      // 清除长按定时器
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer);
        this.longPressTimer = null;
      }
      
      // 如果当前是快进状态，则恢复正常速度
      if (this.isFastSpeed) {
        this.disableFastSpeed();
      }
    },
    
    // 启用2倍速播放
    enableFastSpeed() {
      if (this.$refs.video) {
        this.originalSpeed = this.$refs.video.playbackRate;
        this.$refs.video.playbackRate = 2.0;
        this.isFastSpeed = true;
      }
    },
    
    // 禁用2倍速播放，恢复原速
    disableFastSpeed() {
      if (this.$refs.video) {
        this.$refs.video.playbackRate = this.originalSpeed;
        this.isFastSpeed = false;
      }
    },
    
    // 切换视频类型
    changeVideoType() {
      // 清空当前队列
      this.videoQueue = [];
      this.nextVideo();
    }
  }
}
</script>

<style scoped lang="scss">
/* 全局样式重置 */
::v-deep html, ::v-deep body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
  /* 确保没有滚动条 */
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

::v-deep html::-webkit-scrollbar, ::v-deep body::-webkit-scrollbar {
  display: none;
}

.random-video-btn {
  position: fixed;
  left: 20px;
  bottom: 50%;
  font-size: 1.5rem;
  color: #409eff;
  cursor: pointer;
}

.video-container {
  padding: 0;
  margin: 0;
  position: relative;
  width: 100vw;
  height: calc(100vh - 56px); /* 精确匹配头部高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  /* 额外确保没有滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  user-select: none; // 防止长按时选中文本

  video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #409eff;
    animation: spin 1s ease-in-out infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  
  .speed-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    z-index: 100;
  }
}

/* 隐藏滚动条 */
.video-container::-webkit-scrollbar {
  display: none;
}

.video-type-select {
  max-width: 80%;
  width: 200px;
}

/* 视频头部样式 */
.video-header {
  position: relative;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  margin: 0;
  width: 100%;
}
</style>